var MaterialDetail = function () {
  var template = /* html */ `
    <div class="material-detail">
      <div class="material-detail-content clearfix">
        <div class="detail-content">
          <el-form label-width="calc(4em + 25px)">
            <el-form-item label="物料名称">
              <span>{{materialForm.materialName}}</span>
            </el-form-item>
            <el-form-item label="物料分类" v-if="modeType==='released'">
              <span>{{classifyNameList.join(' - ')}}</span>
            </el-form-item>
            <el-form-item label="规格型号">
              <span>{{materialForm.model}}</span>
            </el-form-item>
            <el-form-item label="编号">
              <span>{{materialForm.color}}</span>
            </el-form-item>
            <el-form-item label="描述">
              <span>{{materialForm.colorDescription}}</span>
            </el-form-item>
            <el-form-item label="材质">
              <span>{{materialForm.material}}</span>
            </el-form-item>

            <template v-if="materialForm.company==='轩昊数控设备'||hasHandle">
              <el-form-item label="商家">
                <span>{{materialForm.company}}</span>
              </el-form-item>
              <el-form-item label="联系人">
                <span>{{materialForm.contactName}}</span>
              </el-form-item>
              <el-form-item label="联系电话" v-if="modeType==='released'">
                <span>{{materialForm.contactPhone}}</span>
              </el-form-item>
              <el-form-item label="商家">
                <span>{{materialForm.providerName}}</span>
              </el-form-item>
            </template>

            <el-form-item label="单位">
              <span>{{materialForm.unit}}</span>
            </el-form-item>
            <el-form-item label="单价">
              <span>{{materialForm.unitPrice}}</span>
            </el-form-item>
            <el-form-item label="我司编号">
              <span>{{materialForm.providerNo}}</span>
            </el-form-item>
            <el-form-item label="库存数量" v-if="modeType==='released'">
              <span>{{materialForm.count}}</span>
            </el-form-item>
          </el-form>
        </div>
        <div class="detail-img" v-if="materialForm.imgUrls.length>0">
          <imgs-upload readonly v-model="materialForm.imgUrls">
          </imgs-upload>
        </div>
      </div>
      <div style="text-align:center;margin-top:5px" v-if="hasBtn">
        <slot name="btn" :material="materialForm"></slot>
      </div>
    </div>
  `;

  return {
    props: {
      material: {
        typ: Object,
        required: true
      },
      hasHandle: {
        type: Boolean,
        default: false
      },
      modeType: {
        type: String,
        default: 'released'
      }
    },

    computed: {
      hasBtn: function () {
        return this.$slots.btn || this.$scopedSlots.btn;
      }
    },

    data: function () {
      var material = this.material;
      material = new MaterialModel(material);
      var classifyList = material.classifyList;
      var classifyNameList = _.map(classifyList, 'name');
      return {
        materialForm: material,
        classifyNameList: classifyNameList
      };
    },

    components: {
      ImgsUpload: ImgsUpload
    },

    template: template
  };
}();